<template>
  <div>
    <div class="lists">
      <span @click="getid(id)">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: null,
    },
  },
  methods: {
    getid() {
      console.log(this.id);
      this.$router.push({
        name: "Modify",
        params: {
          id: this.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.lists {
  width: 500px;
  height: 30px;
  line-height: 30px;
  margin: 5px auto;
  border: 1px solid #42b983;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
